You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
LESSON LIST
-
14:11Flex Containers Revisited
-
9:07Adding Bindings to Station Details
-
7:48Adding Alarms
-
11:16Creating the Data Card View
-
11:17Using a Flex Repeater
-
6:38Defining URL Parameters
LESSON
Adding Bindings to Station Details
Description
Now that we have some components on Station Details, it's time to add some bindings so live data can populate our components.
Transcript
(open in window)[00:00] Welcome back everyone. All right, we're in the middle of developing our station details view and it's time for us to start piping some real-time data into these three display components here. Now, earlier in the series when we were developing the overview vessel object, we ended up talking about things such as view parameters, indirect tag bindings and then transforms. And we're really going to be reusing those here. So the whole point of this station details is we're not going to embed this into another view instead we're going to reuse this entire view for all three of our stations. So for station one to station two or station three we'll use this view. We'll tell the view, hey you're looking at station two and then we'll have all of the indirect tag findings update and look at the correct values. So just like the overview vessel let's start with the view object. So I'll click on station details. Let's add a view parameter. So we'll come over to the property editor and under params, we'll click the little plus button here.
[01:03] We'll add a value type. Since this will be a single value and we can even use a similar name for the parameter. So station number, just like that. And we'll go ahead and give it a value of a, how about one for right now. Okay, now that we have that we can set up some indirect tag bindings let's start with the vessel. So we'll go ahead and I'll select the vessel container, I'll double-click to deeply select and then I'll single click on the vessel just to select it. We'll head over to the property editor and under value, there's a value property. We'll configure our indirect tag binding here. So I'll click the little binding icon. We'll head up to tag. We will select an indirect tag binding. And again, like the last time we did this we want to go ahead and browse for a base path to use and then we'll insert some references to a parameter. So we'll click the tag button here. We'll go to tags. We'll go inside of station one. Doesn't really matter which one would pick at this point and then we'll grab tank_capacity and I'll click okay.
[02:04] So we can see that we get the value of tank_capacity in the little preview down below. Let's go ahead and we'll remove the one from the path, so backspace all of that which gives us an error because it's an incomplete path now which is fine. We'll leave our text cursor where the number was. Let's go ahead and browse for that view parameter we just created. So I'll click the little property browser button here. We'll go down to our view. We'll go into params, we'll select station number and click okay. All right, now last time we messed around with the indirect and tag binding on a vessel components. I went ahead and I added a transform to sort of format the data. I'm not going to do that exact part again here. I'm okay with this instance of the vessel just trying to format and round everything to a percentage. That's fine by me. So we'll just click okay for now. All right, there we are. Now let's go ahead and reuse our work. So again, we can copy and paste bindings.
[03:02] We'll head over to the pretty editor for that value value properties so that the property where we just configured the binding here, I'll right click where it says value here or I should say on the property that has the binding and we will copy binding, not copy, it's a little bit different that would copy the value of this property. We want to actually copy the binding configuration. And let's move that over. Let's start with our valve. So I will click outside of the deep selection which takes us up a level. I will select the pump and valve container. I will double click to deep select and then I'll single select the valve. Now the number on the valve here is represented by this value text property here. So we can actually just paste our binding right here even though the name's different. I'll right click on text and I will paste binding. There we are so, it'll piece the binding configuration over here and just to say it again, that was different than paste, paste of course would paste a value which really wouldn't work out that well this time. So you wanted to paste the binding.
[04:03] Okay, so this is obviously a binding we configured to point at tank_capacity. That's not right for our valve, our valve has a valve flow tag. So let's edit the binding. So we'll go back to that binding interface there and we will replace the end of that tank_capacity. I'll go ahead on the end of that tag path, we'll remove tank_capacity and I'll just type it in valve_flow. And we can see that we're getting a value here. Now I do want to apply some formatting here so let's go ahead and just format practice. Let's do another transform. So we'll click the add transform button. We can do another format transform, we'll click add transform and just like last time we can switch over to a pattern. Now I'm okay with going to a three decimal places for both sides here. So put three pounds down, I'll put a period and three more pounds. All right, now I didn't really talk about it in the transforms video but say you wanted to actually add like a unit. So the end of this path here, so you can actually type other characters.
[05:04] So if we wanted to put GPM or gallons per minute or what have you, we could do that. And you can see that it is being applied by the transform. Although you want to be mindful here because we are using this field here to sort of handle the formatting. Certain characters are actually kind of special. So for example, if you were trying to do percent here, you'll notice that it kind of changes the formatting a little bit differently and that's because that percent symbol actually has some inherent meaning with the format replacement we're doing here. So if you needed to do that, you generally want to wrap up any sort of units you're putting in here in single quotes or apostrophes, whatever you want to call them. There we are. So and that will basically turn whatever you type into a string literal basically. So that way it knows, oh no he means put the actual percent character here so don't apply any sort of other formatting changes. So I don't want to do percent here. I actually want GPM but I did want to mention the single quotes there as a way to sort of add string literals. Cool okay that's fine by me. We'll click okay here.
[06:01] All right. Now let's go ahead and take a look at pump status. So we still have the same container deeply selected, I'll just left click once on pump status and then we do have the binding in our clipboard still, so I'll just go ahead and right click on text here under value and I will paste the binding. There we are. Now we are in a little bit of a trickier scenario here. We do need to add the binding. So it looks at, in this case, our pump fault tag but that's actually a, it's a Boolean value, says true or false here. So I don't necessarily want to show the value of the tag. Maybe we can replace the actual text down here instead of showing a number or showing true or false. We could replace it instead with just some, a string of some sorts. So we can use a transform for that. So let's go ahead and we'll edit the binding here. So for value text, we'll click the edit tag binding button. And again, we will change the tag path. So instead of looking at tank_capacity, pump_faults. Okay and I do want to change the value. I don't want to do this.
[07:00] I don't want to do true and false. So instead, let's add a transform and we'll select a map transform. So we can take the value coming in front of the tag and can say okay, when the value is true show this and then when the value is false show this other thing. So that's what the map transform lets you do. We'll click add transform. And we really haven't looked at a map transform basically you have this input type column which can be a number of other things. So you kind of define what's coming in and then you have an output type. So you can just define what's going out. So really easy if you wanted to like change colors based off of a incoming value or something or change styles and style classes and stuff like that. It gives you a lot of options but for what we're going to do here leaving both of these sets of values fine. And it does have a fallback value so in case the binding retrieves a value you didn't define, it gives you an option to do something else. Shouldn't really be a problem with our Boolean value but we'll leave that alone for right now. We'll just add two more rows. So I hit the little plus button over here twice and the value coming in, you can actually use whatever the little binding preview is reporting to you.
[08:04] So it looks like true in all lowercase and false in all lower case. So I'll start with false tab over and I'll start typing something. So how about in single quotes here or just in quotation marks, doesn't really matter which. If the value of our pump fault is false, it means basically for our simulator here it means the value isn't defaulted. So we just say like it's running or something like that. So I'll type in running, I'll hit Enter there. And then for true, we'll type true all lower case we'll do faulted and hit Enter. So you kind of see that the value sort of been mapped to a different value here. That looks fine by me. We'll click okay and there we are. Great so there are other data points we want to show. We'll talk about those when we start talking about flex repeaters and stuff like that but in the next video and we'll go ahead and wrap this one up here, but in the next video we'll go ahead and we'll talk about this alarm status table and we'll actually configure an alarm. We need to have an alarm in our UDT for this table to be of much use to us.
[09:02] So I'll see you then.